<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <title>MQTT Test</title>
    <script src="../utils/jquery.js"></script>
    <script src="../../../js/ism_mqttws.js"></script>
    <script src="../js/mytest_mqtt_client.js"></script>
    <style>
        p { 
            margin-top: 5px;
            margin-bottom: 5px;
        }
        h3 {
            margin-top: 0px;
            margin-bottom: 5px;
            text-align: center;
        }
        div.clear {
            clear: both;
        }
        span.recv {
            color: green;
        }
        span.send {
            color: red;
        }
    </style>
</head>

<body>

    <h2>MQTT Test</h2>
    <div id="serverData">
        <table>
            <tr>
                <td>ISM Server Host:</td>
                <td><input type="text" id="host" value="9.41.55.178" /></td>
            </tr>
            <tr>
                <td>ISM Server Port:</td>
                <td><input type="text" id="port" value="16103" /></td>
            </tr>
            <tr>
                <td># Clients:</td>
                <td>
                    <input type="text" size="5" id="client_count" value="3" />
                    <input type="button" id="create_clients" value="Create" />
                </td>
            </tr>
        </table>
    </div>

    <div id="clients" />

</body>
</html>
